{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import video_inline_embed with context %}
{% from "macros-protocol.html" import split, picto with context %}

{% extends "firefox/features/base-article.html" %}

{% block page_title %}{{ ftl('features-pip-firefox-picture-in-picture-get-more') }}{% endblock %}
{% block page_desc %}{{ ftl('features-pip-got-things-to-do-and-things-to-watch') }}{% endblock %}
{% block page_image %}{{ static('img/firefox/features/pip/pip-hero.jpg') }}{% endblock %}

{% block page_css %}
  {{ super() }}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('firefox-features-pip') }}
{% endblock %}

{% block article_title_short %}{{ ftl('features-pip-picture-in-picture') }}{% endblock %}
{% block article_title %}{{ ftl('features-pip-get-more-done-with-pop-out-videos') }}{% endblock %}

{% block article_content %}
<p>{{ ftl('features-pip-got-things-to-do-do-both-with') }}</p>

<figure class="c-article-figure">
  {# YouTube is blocked in China so zh-CN gets an alternative, self-hosted video. #}
  {% if LANG == 'zh-CN' %}
  <div class="mzp-c-video">
    <video preload="metadata" controls poster="{{ static('img/firefox/features/pip/video-poster.jpg') }}" data-video-title="Red Panda Cubs - Firefox + Woodland Park Zoo">
      <source src="https://assets.mozilla.net/video/red-pandas.webm" type="video/webm">
    </video>
  </div>
  {% else %}
    {{ video_inline_embed(
      id='F-nFQryDB0s',
      title='Red Panda Cubs - Firefox + Woodland Park Zoo',
      image=resp_img(
        url='img/firefox/features/pip/video-poster.jpg',
        optional_attributes={
          'width': '592',
          'height': '341'
        }
      ),
    ) }}
  {% endif %}
</figure>

<h3>{{ ftl('features-pip-heres-how-it-works') }}</h3>
<ol class="mzp-u-list-styled">
  <li>{{ ftl('features-pip-play-any-video-in-your-updated') }}</li>
  <li class="has-pip-icon">{{ ftl('features-pip-click-the-picture-in-picture-button') }}</li>
  <li>{{ ftl('features-pip-cruise-around-to-other') }}</li>
  <li>{{ ftl('features-pip-repeat-steps-1-3-to-have') }}</li>
</ol>

<h3>{{ ftl('features-pip-3-more-ways-to-use-picture', fallback='features-pip-3-ways-to-use-picture') }}</h3>

<div class="mzp-t-picto-center">
  {{ picto(
    title=ftl('features-pip-watch-a-lecture-or-meeting'),
    heading_level=4,
    image=resp_img(
      url='img/firefox/features/pip/pip-lecture.svg',
      optional_attributes={
        'class': 'mzp-c-picto-image',
        'loading': 'lazy'
      }
    )
  ) }}

  {{ picto(
    title=ftl('features-pip-keep-a-tutorial-video-open'),
    heading_level=4,
    image=resp_img(
      url='img/firefox/features/pip/pip-cook.svg',
      optional_attributes={
        'class': 'mzp-c-picto-image',
        'loading': 'lazy'
      }
    )
  ) }}

  {{ picto(
    title=ftl('features-pip-entertain-cats-dogs-and-kids'),
    heading_level=4,
    image=resp_img(
      url='img/firefox/features/pip/pip-entertain.svg',
      optional_attributes={
        'class': 'mzp-c-picto-image',
        'loading': 'lazy'
      }
    )
  ) }}
</div>
{% endblock article_content %}

{% block js %}
  {{ super() }}
  {{ js_bundle('video-inline-embed') }}
{% endblock %}
